<template>
  <div class="container">
    <ul>
      <li v-for="(item, i) in postlists" :key="i">
        <div class="postbody">
          <div class="usermsg">
            <div style="width: 80%; height: 80%">
              <img style="width: 100%; height: 100%" :src="imgsrc" alt="" />
            </div>

            <label style="width: 80%" for="">Simon</label>
          </div>
          <p class="post">{{ item }}</p>
        </div>
        <div class="bottom">
          <a href="" @click.prevent="">赞</a>
          <a href="" @click.prevent="showcomment">评论</a>
        </div>
        <Comment style="float: left" v-show="commentdisplayflag"></Comment>
      </li>

      <Paging :posttotal="posttotal"></Paging>
    </ul>
  </div>
</template>

<script>
import Comment from "./Comment";
import Paging from "./Paging";
export default {
  name: "postlist_01",
  data() {
    return {
      posttotal: 70,
      commentdisplayflag: false,
      imgsrc: require("@/assets/img/iu1.png"),
    };
  },
  props: ["postlist"],
  components: { Comment, Paging },
  methods: {
    showcomment() {
      this.commentdisplayflag = !this.commentdisplayflag;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.container {
  width: 100%;
}
.container > ul {
  width: 100%;
}
.container > ul > li {
  list-style: none;
  border-bottom: 1px solid #ccc;
  width: 100%;
  /* 自适应高度 */
  overflow: auto;
}
.postbody {
  border-top: 40px;
  width: 100%;
  float: left;
}
.postbody > .usermsg {
  top: 30px;
  width: 100px;
  height: 100px;
  float: left;
}
.postbody > p {
  padding-top: 20px;
  width: 100%;
  height: 100px;
  float: left;
  border: 1px solid #000;
}
.bottom {
  width: 100%;
  float: left;
}
.bottom > a {
  width: 10%;
  float: right;
}
</style>
